<html>
<head>
<title> Login </title>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/login.js"></script>
</head>
<body onload="matrixLogin.onLoad()">
    <center>
        <br/>
        <h1>Log in with one of the following methods</h1>

        <span id="feedback" style="color: #f00"></span>

        <div id="loading">
            <img src="spinner.gif" />
        </div>

        <div id="sso_flow" class="login_flow" style="display:none">
            Single-sign on:
            <form id="sso_form" action="/_matrix/client/r0/login/sso/redirect" method="get">
                <input id="sso_redirect_url" type="hidden" name="redirectUrl" value=""/>
                <input type="submit" value="Log in"/>
            </form>
        </div>

        <div id="password_flow" class="login_flow" style="display:none">
            Password Authentication:
            <form onsubmit="matrixLogin.password_login(); return false;">
                <input id="user_id" size="32" type="text" placeholder="Matrix ID (e.g. bob)" autocapitalize="off" autocorrect="off" />
                <br/>
                <input id="password" size="32" type="password" placeholder="Password"/>
                <br/>

                <input type="submit" value="Log in"/>
            </form>
        </div>

        <div id="no_login_types" type="button" class="login_flow" style="display:none">
            Log in currently unavailable.
        </div>
    </center>
</body>
</html>
